<template>
  <div class="login-box">
    <div class="login-page-container">
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        ref="ruleForm2"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-container"
      >
        <h3 class="title">账号注册</h3>
        <el-form-item prop="account">
          <el-input type="text" minlength="5" maxlength="20" v-model="ruleForm2.account" placeholder="请填写账号(5-20任意字符)"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" minlength="8" maxlength="20" v-model="ruleForm2.checkPass" placeholder="请填写密码(8-20任意字符)"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" minlength="8" maxlength="20" v-model="ruleForm2.checkPass2" placeholder="确认密码(8-20任意字符)"></el-input>
        </el-form-item>
        <div class="ent">
          <span style="width: 60%;"><img :src="img" alt="验证码"></span>
          <span style="width: 40%;"><el-input v-model="ruleForm2.verification"
          placeholder="请填写验证码"
          maxlength="4"
          style="margin-top: 30px;"
          onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"
          ></el-input></span>
        </div>
          <el-input type="text" v-model="ruleForm2.activation" placeholder="请输入激活码开发中输入1"></el-input>
        <el-form-item style="width:100%;margin-top: 10px;">
          <el-button type="primary" style="width:100%;" @click="login" :loading="logining">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import {mapMutations} from "vuex";
  import * as types from "../store/mutation-types";
  import axios from "axios";
  import html from '../api/src'

  export default {
  props: {},
  data() {
    return {
      logining: false,
      ruleForm2: {
        account: "",
        checkPass: "",
        checkPass2: "",
        verification: "",
        activation: "",
      },
      img: "",
      checked: true,
       imgurl: "",
       text: "",
       Error: '',
    };
  },
  created(){
    this.uuid();
    this.imgurl= html.domain + "users/imagecodeid/" + this.text;
    axios.get(this.imgurl)
    .then((res) => {
      this.img = res.config.url;
    })
  },
  methods: {
        uuid() {
          const s = [];
          const hexDigits = "0123456789abcdef";
          for (let i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
          s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
          s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
          s[8] = s[13] = s[18] = s[23] = "-";
          this.text = s.join("");
  },
    login() {
      if(this.ruleForm2.account !== "" && this.ruleForm2.checkPass !== ""  && this.ruleForm2.checkPass2 !== "" &&  this.ruleForm2.verification !== "" && this.ruleForm2.activation !== ""){
         axios({
        method:"post",
        url: html.domain + 'users/register/',
        data:{
        username: this.ruleForm2.account,
        password: this.ruleForm2.checkPass,
        password2: this.ruleForm2.checkPass2,
        image_code_id: this.text,
        text: this.ruleForm2.verification,
      }}
      )
      .then((res) => {
         this.$message({
          message: '恭喜你，注册成功',
          type: 'success'
        });
        console.log(res.data);
        this.$router.push({ path: '/login' })
      })
      .catch(function (error) {
        let arr = error.response.data.non_field_errors;
        let xyy = error.response.data.username;
        console.log(xyy);
        if(arr){
              alert('验证码错误')
              }
        });
        if(xyy){
          alert('已存在一位使用该名字的用户。')
        }
            }
          },
          ...mapMutations({
            setUsername: types.SET_USERNAME,
            setPassword: types.SET_PASSWORD,
            setTreeData: types.SET_TREEDTA,
            setToken: types.SET_TOKEN
          })
        }
};
</script>

<style lang="scss">
@import "../assets/css/them.scss";
.login-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: $globalBgColor;
}
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  .ent{
    display: flex;
    justify-content: center;
  }
}

label.el-checkbox.remember {
  margin: 0px 0px 35px 0px;
}
</style>
